<template>
  <div class="container">
    <div class="left">
      <draggable
        class="dragArea list-group"
        :list="dragListRef"
        :group="{ name: 'media', pull: 'clone', put: false }"
        :clone="cloneItem"
        @change="log"
        item-key="tag"
      >
        <template #item="{ element }">
          <div class="list-group-item drag-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>
    <div class="right">
      <div class="right-item">
        <div class="header">预览</div>
        <draggable
          class="dragArea list-group show-list"
          :list="showList"
          group="media"
          @change="log"
          item-key="id"
        >
          <template #item="{ element }">
            <li
              class="list-group-item"
              :class="[currentElement == element ? 'current' : '', element.tag]"
              @dblclick="setCurrentElement(element)"
            >
              <div class="close" v-if="currentElement == element" @click="deleteElement(element)">
                ×
              </div>
              <component :is="getWidget(element.tag)" :element="element"></component>
              <!-- {{ element.id }} - {{ element.name }} -->
            </li>
          </template>
        </draggable>
      </div>
      <div class="right-item">
        <div class="header">组件编辑</div>
        <div class="edit-wrap">
          <template v-if="currentElement">
            <component :is="getEdit(currentElement.tag)" :element="currentElement"></component
          ></template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import draggable from 'vuedraggable'
import { ref } from 'vue'
import { getNewElement, dragList } from './config'
import getName from './components/getWidget'

const getWidget = (name) => {
  //写的时候，组件的起名一定要与dragList中的element名字一模一样，不然会映射不上
  return getName['my-' + name]
}
const getEdit = (name) => {
  return getName['edit-' + name]
}

const dragListRef = ref(dragList)

const showList = ref([])
const currentElement = ref(null)
const cloneItem = (element) => {
  let newElement = getNewElement(element)
  console.log('cloneItem', newElement)
  return newElement
}
// 拖拽结束，设置选中元素
const log = (evt) => {
  console.log('log', evt)
  if (typeof evt.added != 'undefined') currentElement.value = evt.added.element
}

const dragOptions = ref({
  animation: 200,
  group: 'people',
  // disabled: false,
  ghostClass: 'ghost'
})
const setCurrentElement = (element) => {
  currentElement.value = element
}
const deleteElement = (element) => {
  const idx = showList.value.findIndex((item) => item === element)
  console.log('deleteElement', idx)
  showList.value.splice(idx, 1)
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 80vh;
  position: relative;
  .left {
    width: 200px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 10px 10px 10px;
    .drag-item {
      padding: 5px;
      border-radius: 5px;
      margin-bottom: 10px;
      border: 1px solid #ededed;
      text-align: center;
      cursor: move;
      &:hover {
        border: 1px dashed #00a0e9;
        background: #f2f8ff;
      }
    }
  }
  .right {
    position: absolute;
    left: 200px;
    top: 0;
    height: 100%;
    width: calc(100% - 200px);
    border: 1px dashed #ededed;
    display: flex;

    .right-item {
      width: 50%;
      height: 100%;
      border-left: 1px dashed #ededed;
      .header {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid #ededed;
      }
      .show-list {
        // min-height: 100px;
        height: calc(100% - 50px);
        overflow-y: auto;
        .list-group-item {
          position: relative;
          cursor: move;
          &.current {
            border: 1px dashed #00a0e9;
            background: #f2f8ff;
          }
          .close {
            width: 15px;
            height: 15px;
            line-height: 12px;
            text-align: center;
            color: #fff;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
          }
        }
      }
      .edit-wrap {
        height: calc(100% - 50px);
        overflow-y: auto;
      }
    }
  }
}
</style>
